<template>
    <div>
        <div class="row">
            <a-button type="primary" @click="handleBatchUpdateDiscountPrice" v-if="!readonly">批量设置折扣</a-button>
        </div>
        <a-table :columns="columns" :dataSource="tableData" :rowKey="record=>record.id">
            <!--是否参与折扣-->
            <template slot="isParticipateDiscount" slot-scope="text, record,index">
                <a-switch v-model="record.isParticipateDiscount" @change="handleSwitch(record,index)" :disabled="record.stock==0 || readonly"/>
            </template>
            <!--打折-->
            <template slot="discount" slot-scope="text, record">
                <div class="input_container">
                    <a-input-number v-model="record.discount" :precision="1" :min="0.1" :max="9.9" @change="handleDiscountChange(record)" :disabled="record.stock==0 || record.isParticipateDiscount==false || readonly"/>
                    <div class="err_msg" v-if="record.discountErrorMessage">{{record.discountErrorMessage || ''}}</div>
                </div>
            </template>
            <!--减钱（元）-->
            <template slot="reduceMoney" slot-scope="text, record">
                <div class="input_container">
                    <a-input-number v-model="record.reduceMoney" :precision="2" :min="0" :max="99999999" @change="handleReduceMoneyChange(record)" :disabled="record.stock==0 || record.isParticipateDiscount==false || readonly"/>
                    <div class="err_msg" v-if="record.reduceMoneyErrorMessage">{{record.reduceMoneyErrorMessage || ''}}</div>
                </div>
            </template>
            <!--促销价（元）-->
            <template slot="promotionPrice" slot-scope="text, record">
                <div class="input_container">
                    <a-input-number v-model="record.promotionPrice" :precision="2" :min="0" :max="99999999" @change="handlePromotionPriceChange(record)" :disabled="record.stock==0 || record.isParticipateDiscount==false || readonly"/>
                    <div class="err_msg" v-if="record.promotionPriceErrorMessage">{{record.promotionPriceErrorMessage || ''}}</div>
                </div>
            </template>
        </a-table>
        <DiscountPrice :visible="discountPriceVisible" @cancel="discountPriceVisible=false" @submit="handleDiscountPriceSubmit"></DiscountPrice>
    </div>
</template>

<script>
import DiscountPrice from './DiscountPrice';

export default {
    components:{
        DiscountPrice
    },
    props:{
        tableData:{
            type:Array,
            default(){
                return [];
            }
        },
        readonly:{
            type:Boolean,
            default:false,
        }
    },
    data(){
        return {
            columns:[{
                title:'是否参与折扣',
                dataIndex:'isParticipateDiscount',
                scopedSlots:{ customRender: 'isParticipateDiscount' },
            },{
                title:'商品规格',
                dataIndex:'commoditySpec',
            },{
                title:'现有库存',
                dataIndex:'stock',
                customRender:(text)=>{
                    if(text==0){
                        return <span class="color_red">库存不足</span>;
                    }
                    return text;
                }
            },{
                title:'原价（销售价）',
                dataIndex:'originPrice'
            },{
                title:'打折',
                dataIndex:'discount',
                scopedSlots:{ customRender: 'discount' },
            },{
                title:'减价（元）',
                dataIndex:'reduceMoney',
                scopedSlots:{ customRender: 'reduceMoney' },
            },{
                title:'促销价（元）',
                dataIndex:'promotionPrice',
                scopedSlots:{ customRender: 'promotionPrice' },
            },{
                title:'促销方式',
                dataIndex:'promotionMethod'
            },{
                title:'已下单数量',
                dataIndex:'quantityOrdered'
            }],
            discountPriceVisible:false,
        }
    },
    created(){
        let result = this.isValidateTableData();
        console.log(result);
        this.$emit('change',result?this.tableData:false);
    },
    methods:{
        //是否参与折扣
        handleSwitch(item,index){
            console.log(item,index);
            if(!item.isParticipateDiscount){
                item.discountErrorMessage='';
                item.reduceMoneyErrorMessage='';
                item.promotionPriceErrorMessage='';
            }
            let result = this.isValidateTableData();
            console.log(result);
            this.$emit('change',result?this.tableData:false);
        },
        //打折
        handleDiscountChange(item){
            //折扣价（减钱）=原价*打折
            item.reduceMoney=parseFloat(((item.originPrice || 0) * (1 - (item.discount || 0) / 10)).toFixed(2));
            //促销价=原价-折扣价
            item.promotionPrice=parseFloat(((item.originPrice || 0) - (item.reduceMoney || 0)).toFixed(2));
            let result = this.isValidateTableData();
            console.log(result,item.reduceMoney,item.promotionPrice);
            this.$emit('change',result?this.tableData:false);
        },
        //减钱（折扣价）
        handleReduceMoneyChange(item){
            //打折=折扣价/原价
            item.discount=parseFloat((10-(item.reduceMoney*10 / item.originPrice)).toFixed(2));
            //促销价=原价-折扣价
            item.promotionPrice=parseFloat(((item.originPrice || 0) - (item.reduceMoney || 0)).toFixed(2));
            let result = this.isValidateTableData();
            console.log(result,item.discount,item.promotionPrice);
            this.$emit('change',result?this.tableData:false);
        },
        //促销价
        handlePromotionPriceChange(item){
            //打折=折扣价/原价
            item.discount=parseFloat((10 - (item.reduceMoney*10 / item.originPrice)).toFixed(2));
            //折扣价=原价-促销价
            item.reduceMoney=parseFloat(((item.originPrice || 0) - (item.promotionPrice || 0)).toFixed(2));
            let result = this.isValidateTableData();
            console.log(result,item.discount,item.reduceMoney);
            this.$emit('change',result?this.tableData:false);
        },
        //验证
        isValidateTableData(){
            let isValidate=true;
            this.tableData.forEach(item=>{
                if(item.isParticipateDiscount && item.stock>0 && !this.readonly){
                    //打折
                    if(!item.discount){//为空
                        item.discountErrorMessage='请设置折扣';
                        isValidate=false;
                    }
                    else {//其他情况
                        item.discountErrorMessage='';
                    }
                    // if(item.discount>0 && item.discount<10){//正常
                    //     item.discountErrorMessage='';
                    // }
                    // else if(!item.discount){//为空
                    //     item.discountErrorMessage='请设置折扣';
                    //     isValidate=false;
                    // }
                    // else {//其他情况
                    //     item.discountErrorMessage='请输入0.1-9.9';
                    //     isValidate=false;
                    // }
                    //折扣价
                    if(item.reduceMoney>0 && item.reduceMoney<item.originPrice){//正常
                        item.reduceMoneyErrorMessage='';
                    }
                    else if(!item.reduceMoney){//为空
                        item.reduceMoneyErrorMessage='请设置减价价格';
                        isValidate=false;
                    }
                    else {//其他情况
                        item.reduceMoneyErrorMessage='金额须大于0及小于原价';
                        isValidate=false;
                    }
                    //促销价
                    if(item.promotionPrice>0 && item.promotionPrice<item.originPrice){//正常
                        item.promotionPriceErrorMessage='';
                    }
                    else if(!item.promotionPrice){//为空
                        item.promotionPriceErrorMessage='请设置促销价价格';
                        isValidate=false;
                    }
                    else {//其他情况
                        item.promotionPriceErrorMessage='金额须大于0及小于原价';
                        isValidate=false;
                    }
                }
            });
            return isValidate;
        },
        //批量计算折扣价
        batchCalcDiscountPrice(discount){
            this.tableData.forEach(item=>{
                if(item.isParticipateDiscount && item.stock>0){
                    item.discount=discount;
                    //折扣价（减钱）=原价*打折
                    item.reduceMoney=((item.originPrice || 0) * (1 - (item.discount || 0) / 10));
                    //促销价=原价-折扣价
                    item.promotionPrice=(item.originPrice || 0)-(item.reduceMoney || 0);
                }
            });
        },
        //批量设置折扣价
        handleBatchUpdateDiscountPrice(){
            this.discountPriceVisible=true;
        },
        //批量设置折扣价回调
        handleDiscountPriceSubmit(data){
            console.log(data);
            this.discountPriceVisible=false;
            this.batchCalcDiscountPrice(data.discountPrice);
            this.$emit('change',this.tableData);
        }
    }
}
</script>

<style lang="less" scoped>
.row{
    margin-top:10px;
    margin-bottom:10px;
}
.color_red{
    color:red;
}
.input_container{
    position:relative;
    display: inline;
    .err_msg{
        color:red;
        position: absolute;
        white-space: nowrap;
        left: 50%;
        top: 24px;
        transform: translate(-50%, 0);
        font-size:12px;
    }
}
</style>